<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-upload :disablePreview="true"></fu-upload>
			</view>
		</fu-section>
		
		<fu-section title="图片预览" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-upload></fu-upload>
			</view>
		</fu-section>
		
		<fu-section title="隐藏删除按钮" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-upload :delIcon="false"></fu-upload>
			</view>
		</fu-section>
		
		<fu-section title="限制上传数量3" customClass="fu-m-t-20" type="line">
			<fu-upload :limit="3"></fu-upload>
		</fu-section>
		
		<fu-section title="上传视频" customClass="fu-m-t-20" type="line">
			<fu-upload fileType="video"></fu-upload>
		</fu-section>
		
		<fu-section title="自定义上传样式" customClass="fu-m-t-20" type="line">
			<fu-upload :limit="1" :imageStyles="imagesStyle">
				<fu-image width="100%" height="160" :src="$mAssetsPath.index1"></fu-image>
			</fu-upload>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';

	// data数据
	let imageStyles = reactive({
		width: 64,
		height: 64,
		border: {
			radius: '50%'
		}
	});
	let imagesStyle = reactive({
		width: '250px',
		height: '160px',
		background: '#F5F5F5',
		border: {
			color:"#F5F5F5",
			width:2,
			style:'dashed',
			radius:'2px'
		}
	});
	let fileLists = reactive([{
		url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
		extname: 'png',
		name: 'shuijiao.png'
	}, {
		url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
		extname: 'png',
		name: 'uniapp-logo.png'
	}, {
		url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
		extname: 'png',
		name: 'shuijiao.png'
	}])
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>